<template>
	<view class="vehicle">
		<view class="top_nav">
			<uni-icons @click="retus" type="left" color="#fff" size="25" />
			<view>我的车辆</view>
			<view @click="redact">编辑</view>
		</view>
		<view class="tp" :style="{background: 'url('+clData.licensePlatePicture+') 0% 0% / 100% 100% no-repeat'}">
			<!-- <image mode="widthFix" src="../../../static/xq.png" /> -->
			<view class="xx">
				<view class="cp">
					<view>{{clData.licensePlate}}</view>
					<view v-if="clData.logisticsStatus == 2"><view style="background: #219C5E;"></view> 空闲中</view>
					<view v-if="clData.logisticsStatus == 1" style="color: #FF2B2B;"><view style="background: #FF2B2B;"></view> 运输中</view>
				</view>
				<view class="xh">
					<view>起¥{{vehicleInformation.vehiclePrice}}/{{vehicleInformation.startingKilometers}}km 超¥{{vehicleInformation.markUp}}/公里</view>
				</view>
			</view>
		</view>
		<view class="clxx">
			<view class="vis">
				<view>车厢长宽高</view>
				<view>{{vehicleInformation.lasting}}*{{vehicleInformation.wide}}*{{vehicleInformation.high}}米</view>
			</view>
			<view class="vis">
				<view>车身型号</view>
				<view>{{vehicleInformation.vehicleInformationName}}</view>
			</view>
			<view class="vis">
				<view>车身颜色</view>
				<view>{{clData.vehicleColor}}</view>
			</view>
			<view class="vis">
				<view>车主姓名</view>
				<view>{{clData.contacts}}</view>
			</view>
			<view class="vis">
				<view>联系方式</view>
				<view>{{clData.telephone}}</view>
			</view>
		</view>
		<view class="clxx bots">
			<!-- <view class="vis">
				<view>金额</view>
				<view>0</view>
			</view> -->
			<view class="vis" @click="waybill">
				<view>运货订单</view>
				<image style="width: 8px;height: 10px;" mode="widthFix" src="http://cdn.jxsr.com/right.png" />
			</view>
		</view>
		<!-- 状态 -->
		<view class="buts">
			<view class="service" >
				<span class="sp2" v-if="clData.logisticsStatus == 2" @click="changeTos(1)">空闲中</span>
				<span class="sp2" v-if="clData.logisticsStatus == 1" @click="changeTos(2)">运输中</span>
			</view>
		</view>
	</view>
</template>

<script>
	import { findById,modifyVehicleStatus } from '@/utils/api.js';
	export default {
		data() {
			return {
				id:'',
				clData:[],
				vehicleInformation:[]
			}
		},
		onLoad(e) {
			// console.log(e);
			this.id=e.id
			this.clDetails()
		},
		methods: {
			// 获取数据
			clDetails(){
				// 获取车辆信息数据
				findById({
					id:this.id
				}).then((res) => {
				    if (res.code === 200) {
				      console.log(res);
					  this.clData=res.data
					  this.vehicleInformation=res.data.vehicleInformation
				    } else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			
			// 返回
			retus(){
				uni.navigateBack();
			},
			// 编辑
			redact(){
				uni.navigateTo({
					url: 'add_cl?clic=redact&id='+this.id
					// url:`add_cl?clic=redact&data=${encodeURIComponent(JSON.stringify(this.clData))}`
				})
			},
			// 运货订单
			waybill(){
				uni.navigateTo({
					url: 'waybill?id='+this.id
				})
			},
			// 改变车辆状态
			changeTos(num){
				let that=this
				uni.showModal({
					content: "您确定要修改车辆状态吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							modifyVehicleStatus({
								id:that.id,
								logisticsStatus:num
							}).then((res) => {
							    if (res.code === 200) {
									// console.log(res);
									that.clDetails()
							    } else {
									uni.showToast({title:"请求错误", position: 'bottom'})
							    }
							}).catch((err) => {
								uni.showToast({title:'网络繁忙', position: 'bottom'})
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	// uni-page-body{
	// 	height: 100%;
		.vehicle{
			.top_nav{
				width: 100%;
				height: 50px;
				padding-top: 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				z-index: 3000;
				// background: #333;
				// opacity:0.1;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 22px;
				position: absolute;
				top: 0;
				left: 0;
				view:nth-child(3){
					font-weight: 400;
					color: #219C5E;
					margin-right: 20px;
				}
			}
			.tp{
				height: 260px;
				// background: url('../../../static/xq.png');
				position: relative;
				.xx{
					width: 100%;
					height: 82px;
					position: absolute;
					bottom: -60px;
					left: 0;
					background: #FFFFFF;
					border-radius: 20px 20px 0px 0px;
					.cp{
						height: 41px;
						padding: 0 20px;
						display: flex;
						align-items: center;
						font-size: 22px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: $mainText;
						line-height: 26px;
						view:nth-child(2){
							margin-left: 10px;
							font-size: 16px;
							font-weight: 400;
							color: #1E9B5E;
							line-height: 17px;
							display: flex;
							align-items: center;
							view{
								width: 5px;
								height: 5px;
								border-radius: 50px;
								margin-right: 5px;
							}
						}
					}
					.xh{
						height: 41px;
						padding: 0 20px;
						display: flex;
						align-items: center;
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $text;
						line-height: 17px;
						// view:nth-child(2){
						// 	margin-left: 10px;
						// }
					}
				}
			}
			.clxx{
				// height: 150px;
				background: #FFFFFF;
				border-radius: 10px;
				padding: 0 15px;
				margin: 10px 10px 0 10px;
				.vis{
					height: 50px;
					display: flex;
					align-items: center;
					font-size: 15px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 18px;
					view:nth-child(1){
						width: 30%;
					}
				}
			}
			.clxx:nth-child(3){
				margin: 70px 10px 0 10px;
			}
			.bots{
				.vis{
					justify-content: space-between;
				}
			}
			// 状态
			.buts{
				width: 100%;
				height: 56px;
				position: fixed;
				bottom: 5%;
				.service{
					width: 90%;
					height: 56px;
					margin: 0 auto;
					background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
					box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
					border-radius: 28px;
					display: flex;
					justify-content: center;
					align-items: center;
					.sp2{
						font-size: 18px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56px;
						padding: 0 5px;
					}
				}
			}
		}
	// }
</style>
